<template>
    <div class="order-detail-page" v-if="order">
        <!-- 操作栏 -->
        <DetailAction :order="order" />
        <!-- 步骤条 组件xtx-steps.vue-->
        <DetailSteps :order="order" />
        <!-- 物流栏 -->
        <!-- Suspense 是 vue3 中新增的组件，类似于 keep-alive 不需要任何的引入，可以直接进行使用。
        自带两个 slot 分别为 default、fallback。当要加载的组件不满足状态时,
        Suspense 将回退到 fallback状态一直到加载的组件满足条件，才会进行渲染 -->
        <Suspense v-if="[3, 4, 5].includes(order.orderState)">
            <!-- 组件加载完毕 -->
            <template #default>
                <DetailLogistics :order="order" />
            </template>
            <!-- 组件加载中显示 -->
            <template #fallback>
                <div class="loading"></div>
            </template>
        </Suspense>
        <!-- 订单商品信息 -->
        <OrderInfo :order="order"></OrderInfo>
    </div>
</template>
<script>
import { ref } from 'vue'
import { findOrder } from '@/api/order'
import { useRoute } from 'vue-router'
import DetailAction from './components/detail-action'
import DetailLogistics from './components/detail-logistics'
import DetailSteps from './components/detail-steps'
import OrderInfo from './components/order-info.vue'
export default {
    name: 'OrderDetailPage',
    components: { DetailAction, DetailSteps, DetailLogistics, OrderInfo },
    setup() {
        const order = ref(null)
        const route = useRoute()
        findOrder(route.params.id).then(data => {
            order.value = data.result
        })
        return { order }
    }
}
</script>
<style scoped lang="less">
.order-detail-page {
    background: #fff;
}

.loading {
    height: 290px;
    width: 100%;
    background: url(../../../assets/images/loading.gif) no-repeat center;
}
</style>